<!DOCTYPE html>
<html>
    <head>
        <style>
            .shadow{
                -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
                -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
                -o-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
                box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
            }
            body{
                margin:15px;
            }
            #tri-stock h2,
            #tri-stock h3,
            #tri-stock ul,
            #tri-stock li,
            #tri-stock p{
                padding:0;
                margin:0;
            }
            #tri-stock{
                border:solid 1px #CCC;
                width:228px;
                padding: 5px 0;
                color:#999;
                font-family:'KnowledgeBold','Arial Bold',sans-serif;
            }            
            #tri-stock h2{
                text-transform:uppercase;
                font-size:14px;
                border-bottom:solid 1px #CCC;
                padding:7px;
                margin:0;
            }

            #tri-stock h3{
                text-transform:uppercase;
                font-size:12px;
            }
            #tri-stock ul{
                padding:0 7px;
                list-style:none;
                font-family:'Knowledge','Arial',sans-serif;
                font-size:12px;
            }
            #tri-stock li{
                border-bottom:solid 1px #CCC;
                padding:3px;
            }
            #tri-stock li.last{
                border:none;
            }
            #tri-stock p.tri-up{
                color:green;
            }
            #tri-stock p.tri-down{
                color:red;
            }            
            #tri-stock span{
                display:inline-block;
                width:28%;
            }
            #tri-stock span.tri-c{
                width:12px;
            }
            #tri-stock span.tri-cp{
                width:18%;
            }
            #tri-stock span.tri-u{
                color:black;
                text-transform:uppercase;
                width:15%;
            }
        </style>
    </head>
    <body>
        <div id="tri-stock" class="shadow">
            <h2>TRI Stock Performance</h2>
            <ul id="tri-stock-results">
            </ul>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>
            function getStock(){
                $.ajax({
                        url:'Quote4.json',
                        //dataType:'jsonp',
                        dataType:'json',
                        type:'GET',
                        success:handleResponse,
                        error:function(jqXHR, textStatus, errorThrown){}
                    });
            }
            
            function round(num){
                return Math.round(num*100)/100
            }
            
            function handleResponse(resp){
                if(!resp.quotes) //Makes sure that you're getting an actual response there
                    return;

                var doc = document.createDocumentFragment();
                var list = $('#tri-stock-results');
                
                for(var i = 0, j = resp.quotes.length ; i < j ; i++){
                    var tri = resp.quotes[i],
                        arrow = '',
                        output = '',
                        pClass = '',
                        li = document.createElement('li');

                    if(tri.change < 0){
                        tri.change = round(tri.change * (-1));
                        tri.changePercent = tri.changePercent * (-1);
                        arrow = "&#x25BC;";
                        pClass = 'tri-down';
                    }else if(tri.change > 0){
                        arrow = "&#x25B2;";
                        pClass = 'tri-up';
                        tri.change = round(tri.change);
                    }else{
                        tri.change = '--';
                    }
                    
                    output+='<h3>'+tri.exchange+'</h3>'
                            +'<p class="'+pClass+'"><span class="tri-c">'+arrow+'</span>'
                            +'<span class="tri-cp">'+tri.change+'</span>'
                            +'<span class="tri-last">'+tri.changePercent+'%</span>'
                            +'<span class="tri-cc">$'+round(tri.last)+'</span> <span class="tri-u">'+tri.currencyLabel+'</span></p>';
                    
                    li.innerHTML = output;
                    
                    if((i+1)==j)
                        li.className='last';
                    
                    doc.appendChild(li);
                }
                list.empty().append(doc);
            }
            
            getStock();
            setInterval(getStock,60000);            
        </script>
    </body>
</html>